<template>
	<view>
		<!-- <view class="head">
			<view class="back">
				<image src="../static/icon/back.png" mode="widthFix"></image>
			</view>
			<view class="tit">云上坚果</view>
		</view> -->


		<van-nav-bar @click-left="back(e)" :left-text="leftText" :placeholder="true" :fixed="true" :title="title" custom-class="backgroud" title-class="titleClass">
			 <van-icon :name="nameRight" slot="right" :color="colorRight"/>
			<van-icon  :name="nameLeft" slot="left" :color="colorLeft" />
			
			<!-- <h1>{{nameLeft}}</h1>
			 <h1>{{nameRight}}</h1> -->
		</van-nav-bar>
		
		
		 
		

	</view>
</template>

<script>
	import NavBar from "../wxcomponents/vant/nav-bar/index.js"
	import Icon from "../wxcomponents/vant/icon/index.js"
	export default {
		name: "header",
		props:['title','nameLeft','nameRight','colorRight','colorLeft','leftText'],
		data() {
			return {
				
			};
		},
		methods:{
			back(e){
				// console.log('e',e)
				
				// this.$emit('goBack',1213)
				uni.navigateBack()
			}
		},
		components: {
			"van-nav-bar": NavBar,
			"van-icon":Icon
		}
	}
</script>

<style lang="scss" scoped>
	// .head{
	// 	display: flex;
	// 	position: relative;
	// 	// justify-content: center;
	// 	align-items: center;
	// 	width: 100%;
	// 	padding: 40rpx 0;
	// 	background-color: rgba(212, 252, 121, 1);



	// 	.back{
	// 		vertical-align: middle;
	// 		text-align: center;
	// 		image{
	// 			width: 45rpx;
	// 			// height: 50rpx;
	// 		}
	// 	}
	// 	.tit{
	// 		position: absolute;
	// 		left: 50%;
	// 		top: 50%;
	// 		transform: translate(-50%,-50%);
	// 		text-align: center;
	// 		color: #000000;
	// 		font-weight: 600;
	// 	}

	// }

	

	/deep/ .backgroud {
		background-color: #bfa !important;
		padding-top: 0 !important;
		font-weight: bold;
		
	}
	/deep/ .titleClass{
		color: #fff !important;
	}
</style>
